<template lang="html">
  <div id="record" >
        <!-- 星星等级 -->
    <div class="star clearfix" id="star">       
            <i class="kongxin" :style="'background-image: url('+$qiniu.url+'assets/img/starjianshen2.png)'"></i>      
            <i class="shixin" :style="'background-image: url('+$qiniu.url+'assets/img/starjianshen.png)'"></i>   
            <i class="wrapperstar"></i>   
    </div>
        <!--课程的分 -->
    <div class="grade clearfix" v-if = 'result.data !=null'>       
            <span class="cgrade">课程得分：{{ (result.data.score!=null?result.data.score:0) }}</span>
            <span class="cmax">最高纪录：{{ (result.data.maxScore!=null?result.data.maxScore:0) }}</span>
    </div>
        <!--时间和卡路里-->
    <div class="consume" v-if = 'result.data !=null'>
        <div class="kcal clearfix">
            <i class="xiaohao" :style="'background-image: url('+$qiniu.url+'assets/img/jianshenFire.png)'"></i>
            <span class="kaclnum">{{ result.data.kcal }}千卡</span>
            <span class="tips" v-if='result.data.kcalTo'>（大约{{ result.data.kcalTo }}）</span> 
        </div>
         <div class="time clearfix">
            <i class="xiaohao" :style="'background-image: url('+$qiniu.url+'assets/img/jianshenTime.png)'"></i>
            <span class="timenum">用时：{{ result.data.time }}分钟</span> 
        </div>
    </div>
  </div>
</template>
<script>
    import {
        errFun,
    } from "../../tools.js";
    import api from "../../api"
    export default {
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
        },
        // props: ['result'],
        data() {
            return {
                star: 0,
                result: {
                    data: null,
                    message: ''
                }
            }
        },
        created() {
            // this.$store.dispatch('GET_RESULT_BY', this.$route.params.id);
        },
        methods: {
            //获取结果
            getResult() {
                var that = this;
                api.getResultBY(this.$route.params.id).then(function(result) {
                    if (result.data.code == 200) {
                        // 必须得等数据请求成功，才能渲染
                        that.delResult(result, that);
                    }
                })
            },
            // 获取到的数据的处理
            delResult(result, that) {
                if (result.data.code == 200) {
                    result.data.result.kcal = result.data.result.kcal.toFixed(0);
                    result.data.result.time = (result.data.result.time > 60 ? (result.data.result.time / 60) : 1).toFixed(0);
                    result.data.result.beat = result.data.result.beat.toFixed(0);
                    result.data.result.star = result.data.result.star > 5 ? 5 : result.data.result.star;
                    if (result.data.result.star > 5) {
                        result.data.result.star = result.data.result.star;
                    }
                    // if (result.data.result.star < 1) {
                    //     result.data.result.star = 0;
                    // }
                    // console.log(result.data.result.star < 0);
                    that.result.data = result.data.result;
                    that.star = result.data.result.star;
                    // console.log(that.result.data)
                    that.showstar(that);
                } else {
                    that.result.message = result.data.message;
                }
            },
            // 五角星的渲染
            showstar(that) {
                var star = document.querySelector("#star");
                var shixin = star.querySelector(".shixin");
                var kongxin = star.querySelector(".kongxin1");
                var wrapperstar = star.querySelector(".wrapperstar");
                var num = that.star ? that.star : 0;
                if (parseInt(num) === num) {
                    // 利用parseInt的转换判断是否是整数，
                    // 表示是整数
                    shixin.style.left = -(Math.floor(star.offsetWidth / 5) + 1) * (5 - num) + 'px';
                } else if (parseInt(num) != num && parseInt(num) < 5 && parseInt(num) > 0) {
                    // 表示不是整数
                    shixin.style.left = -(Math.floor(star.offsetWidth / 5) + 1) * (5 - (parseInt(num) + 1)) + 'px';
                    wrapperstar.style.left = ((Math.floor(star.offsetWidth / 5) + 1) * ((parseInt(num))) + 14.5) + 'px'

                } else if (num < 1) {

                    wrapperstar.style.left = ((Math.floor(star.offsetWidth / 5) + 1) * ((parseInt(num))) + 14.5) + 'px';
                    shixin.style.left = -(Math.floor(star.offsetWidth / 5) + 1) * (5 - 1) + 'px';

                } else {
                    return;
                }
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.getResult(); // 仅仅只是为了获取星星的个数
            })
        },
    }
</script>
<style>
    #record {
        .rate {
            width: 60%;
            height: 30px;
            background-color: #fdb602;
            margin-left: 20%;
            color: #181818;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .star {
            width: 147px;
            height: 40px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .star i {
            width: 100%;
            height: 100%;
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-origin: content-box;
        }
        .star .wrapperstar {
            width: 15px;
            height: 40px;
            background-color: #161616;
            position: absolute;
            top: 0px;
            left: -40px;
            /*z-index: 99999*/
        }
        .star .shixin,
        .star .kongxin {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .star .shixin {
            left: -200px;
        }
        .star .kongxin {
            z-index: 999;
        }
        .grade {
            width: 76%;
            margin-left: 12%;
        }
        .grade .cgrade {
            font-size: 14px;
            color: #fff;
            float: left;
        }
        .grade .cmax {
            font-size: 14px;
            float: right;
            color: #fdb602;
        }
        .consume {
            margin-top: 20px;
            border: 1px solid #fdb602;
            width: 90%;
            /*height: 130px;*/
            margin-left: 5%;
            padding-top: 20px;
            padding-bottom: 20px;
            box-sizing: border-box;
            /*padding-left: 25%;*/
        }
        .consume .kcal,
        .consume .time {
            width: 55%;
            margin-left: 28%;
            position: relative;
        }
        .consume .time {
            width: 65%;
            margin-top: 35px;
        }
        .consume .kcal .xiaohao,
        .consume .time .xiaohao {
            display: block;
            width: 45px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: contain;
            background-origin: content-box;
            float: left;
        }
        .consume .kcal .kaclnum,
        .consume .time .timenum {
            display: block;
            float: left;
            color: #fff;
            line-height: 30px;
            font-size: 16px;
            color: #fdb602;
            position: absolute;
            top: -5px;
            left: 30px;
        }
        .consume .kcal .tips {
            color: #fdb602;
            font-size: 12px;
            display: block;
            position: absolute;
            top: 20px;
            left: 25px;
        }
    }
</style>